<template>
  <div>
    <!-- <router-link to="/home1">跳转</router-link> -->

    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(i, item) in arrtu" :key="item"
        ><img v-bind:src="i.pic" alt=""
      /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <div class="supermarket">
      <div class="classify">
        <li v-for="(i, item) in arr" :key="item" @click="pinlei(item)">
          <span>{{ i.title }}</span>
        </li>
      </div>
    </div>
    <div class="xing">
      <li v-for="(i, item) in arrnew" :key="item" @click="tiaozhuan(item)">
        <img v-bind:src="i.pic" alt="" />
        <span>{{ i.title }}</span>
      </li>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: "",
      arrnew: "",
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
      arrtu: "",
    };
  },
  mounted() {
    axios.get("https://jd.itying.com/api/pcate").then((res) => {
      this.arr = res.data.result;
    });
    // this.swiper.slideTo(3, 1000, false);
    axios.get(" https://jd.itying.com/api/focus").then((res) => {
      this.arrtu = res.data.result;
      this.arrtu.forEach((item) => {
        item.pic = "https://jd.itying.com/" + item.pic.split("\\").join("/");
        return item.pic;
      });
    });
  },

  methods: {
    pinlei(item) {
      axios
        .get("https://jd.itying.com/api/plist?cid=" + this.arr[item]._id)
        .then((res) => {
          this.arrnew = res.data.result;
          this.arrnew.forEach((item) => {
            item.pic =
              "https://jd.itying.com/" + item.pic.split("\\").join("/");
            return item.pic;
          });
          console.log(res.tate);
        });
    },
    tiaozhuan(item) {
      console.log(item);
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}

.fenlei {
  width: 100%;
  height: 2rem;
  flex-direction: column;
}

.fenlei div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fenlei img {
  width: 2rem;
}

.fenlei span {
  font-size: 0.2rem;
  height: 2rem;
  text-align: center;
}

.supermarket .classify {
  /* 分类 */
  height: 3.42rem;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  position: relative;
}

.supermarket .classify li {
  color: #000;
  width: 33%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.supermarket .classify li img {
  height: 0.75rem;
}
.xing {
  margin-top: 5rem;
}
.xing li {
  width: 100%;
  height: 10rem;
  display: flex;
  flex-direction: column;
}
.xing li img {
  width: 70%;
  height: 70%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100% !important;
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 200px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
</style>
